<!DOCTYPE html>
<html>
<head>
	<title>点播详情</title>
	<link rel="stylesheet" type="text/css" href="../css/reset.css">
	<link rel="stylesheet" type="text/css" href="../css/public.css">
	<style type="text/css" media="screen">
		.p9-content{
			width: 100%;
			height: 383px;
			overflow: hidden;
			box-sizing: border-box;
			padding: 0 128px 0 136px;
			background: #00386E;
		}
		.p9-content-title{
			width: 100%;
			height: 30px;
			padding: 24px 0;
			line-height: 30px;

		}
		.p9-content-title .title-left{
			float: left;
		}
		.p9-content-title .title-left h2{
			font-size: 30px;
			color:#ccc;
			display: inline-block;
		}
		.p9-content-title .title-left span{
			font-size: 24px;
			padding-left: 24px;
			color:#8b8b8a;
		}
		.p9-content-title .title-right{
			float: right;
			color:#fff;
			font-size: 30px;
		}
		.p9-content-title .title-right span{
			
			color:#d4a746;
		}

		.p9-content-detail{
			width: 100%;
			height: 305px;
			box-sizing: border-box;
			padding-bottom: 20px;
			overflow: hidden;
		}
		.p9-content-detail .detail-left{
			width: 220px;
			height: 100%;
			float: left;
		}
		.p9-content-detail .detail-right{
			width: 796px;
			height: 100%;
			float: right;
			box-sizing: border-box;
			padding-left: 40px;
			line-height: 35px;
			font-size: 24px;
		}

		.p9-content-detail .dark1{
			color:#8B8C89;
			padding-right: 32px;
		}
		.p9-content-detail .dark2{
			color:#cccccc;
			padding-right: 32px;
		}
		.p9-content-detail .detail-direct{
			width: 100%：
			height:	35px;
		}
		.p9-content-detail .detail-translate{
			width: 100%：
			height:	35px;
		}
		.p9-content-detail .detail-content{
			width: 100%：
			height:	140px;
			overflow: hidden;
		}
		.p9-content-detail .detail-button{
			width: 100%;
			height: 73px;
		}
		.detail-button ul{
			width: 100%;
			height: 100%;
			overflow: hidden;
		}
		.detail-button .detail-play{
			float: left;
			width: 199px;
			height: 73px;
			background: url("../images/onDemandDetail/an1.png");
		}
		.detail-button .detail-play:focus{
			background: url("../images/onDemandDetail/an1-1.png");
		}

		.detail-button .detail-collect{
			float: left;
			width: 199px;
			height: 73px;
			background: url("../images/onDemandDetail/an2.png");
		}
		.detail-button .detail-collect:focus{
			background: url("../images/onDemandDetail/an2-1.png");
		}

		.detail-button .detail-back{
			float: left;
			width: 199px;
			height: 73px;
			background: url("../images/onDemandDetail/an3.png");
		}
		.detail-button .detail-back:focus{
			background: url("../images/onDemandDetail/an3-1.png");
		}

		.p9-recommend{
			width: 100%;
			height: 225px;
			overflow: hidden;
			box-sizing: border-box;
			padding-left: 128px;
			background: #002545;
		}
		.p9-recommend-title{
			font-size: 30px;
			color: #fff;
			float: left;
			width: 160px;
			height: 100%;
			box-sizing: border-box;
			padding-top: 53px;
			font-weight: normal;
		}
		.p9-recommend-list{
			width: 980px;
			height: 100%;
			display: flex;
			justify-content: space-between;
			overflow: hidden;
		}
		.p9-recommend-list ul{
			width: 900px;
			height: 100%;
			overflow: hidden;
		}
		.p9-recommend-list ul li{
			float: left;
			height: 100%;
			box-sizing: border-box;
			width: 225px;
			padding:5px 30px 5px 30px;
			outline: none;
		}
		.p9-recommend-list ul li p{
			width: 100%;
			height: 30px;
			font-size: 16px;
			line-height: 30px;
			color: #fff;
		}
		.p9-recommend-list ul li img{
			width: 100%;
			height:-webkit-calc(100% - 30px);
			height:-moz-calc(100% - 30px);
			height:calc(100% - 30px);
		}
		.p9-recommend-list ul li:focus img{
			box-sizing: border-box;
			border:3px solid #fff;
		}
		
		
	</style>
</head>
<body>
<div id="p9" class="box">	

	<div class="bx-header" id="p9y0">
		<div class="bx-header-left" id="p9y0x0">
			<img src="../images/home/logo.png" alt="">
			</div>
		<div class="header_middle" id="p9y0x1">

			<!-- <span src="">点播</span> -->

		</div>
		<div class="bx-header-right" id="p9y0x2">
			<div class="header-right-left" id="p9y0x2x0" tabindex="-1">
				
			</div>
			<div  class="header-right-right" id="p9y0x2x1">
				<div class="bx-time" id="bx_time">
					
				</div>
			</div>
		</div>
	</div>
	<div class="p9-page-detail" id="p9Detail">
		
		<div class="p9-content" id="p9y1">
			<div class="p9-content-title">
				<div class="title-left">
					<h2>2016欧洲杯赛事回顾</h2>
					<span>记录/记实/访谈</span>
				</div>

				<div class="title-right">
					<span>5236</span>人看过
				</div>
			</div>

			<div class="p9-content-detail">
				<div class="detail-left">
					<img src="../images/onDemandDetail/bigpic.png" alt="">
				</div>

				<div class="detail-right">
					<div class="detail-direct"><span class="dark1">导演</span><span class="dark2">迈克尔·威廉姆斯</span></div>
					<div class="detail-translate"><span class="dark1">翻译</span><span class="dark2">李炎宏 张逢 宋睿</span></div>
					<div class="detail-content">
						<span class="dark1">内容介绍</span> <br>
						<span class="dark2">北京时间6月23日凌晨，2016发过欧洲杯小组赛全部结束，北京时间6月23日凌晨，2016发过欧洲杯小组赛全部结束，北京时间6月23日凌晨，2016发过欧洲杯小组赛全部结束，北京时间6月23日凌晨......</span>
					</div>
					<div class="detail-button">
						<ul id="p9y1ul">
							<li class="detail-play" tabindex="-1"></li>
							<li class="detail-collect" tabindex="-1"></li>
							<li class="detail-back" tabindex="-1"></li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<div class="p9-recommend" id="p9y2">
			<div class="p9-recommend-title">
				为您推荐
			</div>

			<div class="p9-recommend-list">
				<div class="right_arrow">
					<img src="../images/home/xiangzuo.png">
				</div>
				<ul id="p9y2ul">
					<li tabindex="-1">
						<img src="../images/onDemandDetail/pic1.png" alt="">
						<p>2016欧冠总决赛</p>
					</li>
					<li tabindex="-1">
						<img src="../images/onDemandDetail/pic2.png" alt="">
						<p>2016欧冠半决赛</p>
					</li>
					<li tabindex="-1">
						<img src="../images/onDemandDetail/pic3.png" alt="">
						<p>2016欧冠1/4决赛</p>
					</li>
					<li tabindex="-1">
						<img src="../images/onDemandDetail/pic4.png" alt="">
						<p>2016欧冠1/4决赛</p>
					</li>
				</ul>
				<div class="right_arrow">
					<img src="../images/home/xiangyou.png">
				</div>
			</div>
		</div>
	</div>
	<div class="bx-dialog" id="collectSuccess" style="display: none" tabindex="-1">
		<div class="bx-dialog-box">
			<div class="collect-dialog-top">
				<img src="../images/detention/chenggong.png" alt="">
				<span>恭喜您，收藏成功</span>
			</div>
			<div class="collect-dialog-button">
				<img src="../images/detention/fanhui.png" alt="">
			</div>
		</div>
	</div>
	<div class="bx-dialog" id="collectDefeate" style="display: none" tabindex="-1">
		<div class="bx-dialog-box">
			<div class="collect-dialog-top">
				<img src="../images/detention/shibai.png" alt="">
				<span>很遗憾，收藏失败</span>
			</div>
			<div class="collect-dialog-button">
				<img src="../images/detention/fanhui.png" alt="">
			</div>
		</div>
	</div>

	<div class="bx-dialog" style="display: none" id="detentionDialog">
		<div class="bx-dialog-box">
			<div class="detention-box-top">
				<span>确认退出当前页面？</span>
			</div>
			<div class="detention-box-button">
				<span id="detentionDialogLeft" tabindex="-1">我 点 错 了</span>
				<span id="detentionDialogRight" tabindex="-1">确 认 退 出</span>
			</div>
		</div>
	</div>
</div>


<script src="../js/jquery.min.js"></script>
<script src="../js/public.js"></script>
<script>

	/*退出操作*/
	var currentDom;
	var isOnEnd = false;
	function onEnd(dom){
		if(isOnEnd) return;
		isOnEnd = true;
		$("#detentionDialog").show();
		setFocus("detentionDialogLeft");
		currentDom = dom;
	}

	function detentionDialogLeft(event,dom,dir){
		
		switch(event){
			case "MoveFocus":
				switch(dir){
					case "left":
						setFocus("detentionDialogRight");
						break;
					case "right":
						setFocus("detentionDialogRight");
						break;
				}
				break;
			case "Back":
				$("#detentionDialog").hide();
				currentDom.focus();
				isOnEnd = false;
				break;
			case "Click":
				$("#detentionDialog").hide();
				currentDom.focus();
				isOnEnd = false;
				break;
		}
		
	}

	function detentionDialogRight(event,dom,dir){
		switch(event){
			case "MoveFocus":
				switch(dir){
					case "left":
						setFocus("detentionDialogLeft");
						break;
					case "right":
						setFocus("detentionDialogLeft");
						break;
				}
				break;
			case "Back":
				$("#detentionDialog").hide();
				currentDom.focus();
				isOnEnd = false;
				break;
			case "Click":
				
				break;
		}
		
	}


	setFocus("p9y1ul");

	function p9y0x2x0(event,dom,dir){
		switch(event){
			case "MoveFocus":
				switch(dir){
					case "down":
						setFocus("p9y1ul");
						break;
				}
				break;
			case "Back":
				window.location.href = hdLocation+"lookBack1.html";
				break;
			case "Click":
				window.location.href = hdLocation+"collect.html?prePage=onDemandDetail";
				break;
		}
	}

	function p9y1ul(event,dom,dir){
		switch(event){
			case "MoveFocus":
				if(ulIsBorder(dom,dir,3,3)){
					switch(dir){
						case "up":
							setFocus("p9y0x2x0");
							break;
						case "down":
							setFocus("p9y2ul");
							break;
					}
				}
				break;
			case "Back":

				window.location.href = hdLocation+"lookBack1.html";
				
				break;
			case "Click":
				
				var index = dom.index();

				switch(index){
					case 0:
						window.location.href = hdLocation+"play.html";
						break;
					case 1:
						$("#collectSuccess").show();
						setFocus("collectSuccess");
						break;
					case 2:
						window.location.href = hdLocation+"lookBack1.html";
						break;
				}

				break;
		}
	}

	function p9y2ul(event,dom,dir){
		switch(event){
			case "MoveFocus":
				if(ulIsBorder(dom,dir,6,6)){
					switch(dir){
						case "up":
							setFocus("p9y1ul");
							break;
					}
				}
				break;
			case "Back":
				window.location.href = hdLocation+"lookBack1.html";
				break;
			case "Click":
				window.location.href = hdLocation+"onDemandDetail.html";
				break;
		}
	}

	function collectSuccess(event,dom,dir){
		switch(event){
			case "MoveFocus":
				break;
			case "Back":
				$("#collectSuccess").hide();
				setFocus("p9y1ul",1);
				break;
			case "Click":
				$("#collectSuccess").hide();
				setFocus("p9y1ul",1);
				break;
		}
	}
</script>
</body>
</html>